<template>
    <div class="white-box">
        <cell-tip show-more :datas="tipArrs" bottom="30px" />
        <title-more title="区域代理商设置" />
        <el-form ref="ruleRef" :model="ruleForm" :rules="ruleCheck" label-width="220px">
            <div class="form-one">
                <el-form-item label="省级运营中心返佣比例" prop="one_reward">
                    <el-input
                        v-model.trim="ruleForm.one_reward"
                        oninput="value=value.replace(/[^\d.]/g,'')"
                        clearable
                        placeholder="请输入整数或小数(保留两位小数)"
                    />
                    <span class="input-icon">%</span>
                </el-form-item>
                <el-form-item label="市级运营中心返佣比例" prop="two_reward">
                    <el-input
                        v-model.trim="ruleForm.two_reward"
                        oninput="value=value.replace(/[^\d.]/g,'')"
                        clearable
                        placeholder="请输入整数或小数(保留两位小数)"
                    />
                    <span class="input-icon">%</span>
                </el-form-item>
                <el-form-item label="县级运营中心返佣比例" prop="three_reward">
                    <el-input
                        v-model.trim="ruleForm.three_reward"
                        oninput="value=value.replace(/[^\d.]/g,'')"
                        clearable
                        placeholder="请输入整数或小数(保留两位小数)"
                    />
                    <span class="input-icon">%</span>
                </el-form-item>
            </div>

            <pub-panel title="代理商自动升级" tip="开启该功能后，会员满足下方条件将自动成为相应等级的代理商" bottom="30px">
                <template #right>
                    <el-switch
                        v-model="ruleForm.switch"
                        :inactive-value="0"
                        :active-value="1"
                        width="72px"
                        size="large"
                        inline-prompt
                        active-text="已开启"
                        inactive-text="已关闭"
                    />
                </template>
            </pub-panel>

            <title-more title="非区域代理商设置" />
            <el-tabs type="card">
                <el-tab-pane label="一级代理佣金">
                    <div class="form-one">
                        <el-form-item label="代理商名称" prop="one_name">
                            <el-input v-model.trim="ruleForm.one_name" clearable placeholder="请输入代理商名称" />
                        </el-form-item>
                        <el-form-item label="返佣比例" prop="one_dls_reward">
                            <el-input
                                v-model.trim="ruleForm.one_dls_reward"
                                oninput="value=value.replace(/[^\d.]/g,'')"
                                clearable
                                placeholder="请输入整数或小数(保留两位小数)"
                            />
                            <span class="input-icon">%</span>
                        </el-form-item>
                    </div>
                    <div class="form-one">
                        <p>升级条件</p>
                        <el-form-item label="直属推荐会员" prop="one_zshy">
                            <el-input
                                v-model.trim="ruleForm.one_zshy"
                                oninput="value=value.replace(/[^\d]/g,'')"
                                clearable
                                placeholder="请输入所需直属推荐会员数"
                            />
                            <!-- <span class="input-icon">个</span> -->
                            <el-radio-group v-model="ruleForm.one_zshy_radio" class="form-one-radio">
                                <el-radio label="0">或</el-radio>
                                <el-radio label="1">与</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="推荐多少个会员" prop="one_tjhy">
                            <el-input
                                v-model.trim="ruleForm.one_tjhy"
                                oninput="value=value.replace(/[^\d]/g,'')"
                                clearable
                                placeholder="请输入推荐会员数量"
                            />
                            <!-- <span class="input-icon">个</span> -->
                            <el-radio-group v-model="ruleForm.one_tjhy_radio" class="form-one-radio">
                                <el-radio label="0">或</el-radio>
                                <el-radio label="1">与</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="直接推荐几个二级级代理商" prop="one_tjej">
                            <el-input
                                v-model.trim="ruleForm.one_tjej"
                                oninput="value=value.replace(/[^\d]/g,'')"
                                clearable
                                placeholder="请输入推荐二级级代理商数"
                            />
                            <!-- <span class="input-icon">个</span> -->
                            <el-radio-group v-model="ruleForm.one_tjej_radio" class="form-one-radio">
                                <el-radio label="0">或</el-radio>
                                <el-radio label="1">与</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="直接推荐几个三级级代理商" prop="one_tjsj">
                            <el-input
                                v-model.trim="ruleForm.one_tjsj"
                                oninput="value=value.replace(/[^\d]/g,'')"
                                clearable
                                placeholder="请输入推荐三级级代理商数"
                            />
                            <!-- <span class="input-icon">个</span> -->
                            <el-radio-group v-model="ruleForm.one_tjsj_radio" class="form-one-radio">
                                <el-radio label="0">或</el-radio>
                                <el-radio label="1">与</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="团队订单累计" prop="one_team_order">
                            <el-input
                                v-model.trim="ruleForm.one_team_order"
                                oninput="value=value.replace(/[^\d]/g,'')"
                                clearable
                                placeholder="请输入团队订单累计数"
                            />
                            <!-- <span class="input-icon">笔</span> -->
                            <el-radio-group v-model="ruleForm.one_team_order_radio" class="form-one-radio">
                                <el-radio label="0">或</el-radio>
                                <el-radio label="1">与</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="二级代理佣金">
                    <div class="form-one">
                        <el-form-item label="代理商名称" prop="two_name">
                            <el-input v-model.trim="ruleForm.two_name" clearable placeholder="请输入代理商名称" />
                        </el-form-item>
                        <el-form-item label="返佣比例" prop="two_dls_reward">
                            <el-input
                                v-model.trim="ruleForm.two_dls_reward"
                                oninput="value=value.replace(/[^\d.]/g,'')"
                                clearable
                                placeholder="请输入整数或小数(保留两位小数)"
                            />
                            <span class="input-icon">%</span>
                        </el-form-item>
                    </div>
                    <div class="form-one">
                        <p>升级条件</p>
                        <el-form-item label="直属推荐会员" prop="two_zshy">
                            <el-input
                                v-model.trim="ruleForm.two_zshy"
                                oninput="value=value.replace(/[^\d]/g,'')"
                                clearable
                                placeholder="请输入所需直属推荐会员数"
                            />
                            <!-- <span class="input-icon">个</span> -->
                            <el-radio-group v-model="ruleForm.two_zshy_radio" class="form-one-radio">
                                <el-radio label="0">或</el-radio>
                                <el-radio label="1">与</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="推荐多少个会员" prop="two_tjhy">
                            <el-input
                                v-model.trim="ruleForm.two_tjhy"
                                oninput="value=value.replace(/[^\d]/g,'')"
                                clearable
                                placeholder="请输入推荐会员数量"
                            />
                            <!-- <span class="input-icon">个</span> -->
                            <el-radio-group v-model="ruleForm.two_tjhy_radio" class="form-one-radio">
                                <el-radio label="0">或</el-radio>
                                <el-radio label="1">与</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="直接推荐几个三级级代理商" prop="two_tjsj">
                            <el-input
                                v-model.trim="ruleForm.two_tjsj"
                                oninput="value=value.replace(/[^\d]/g,'')"
                                clearable
                                placeholder="请输入推荐三级级代理商数"
                            />
                            <!-- <span class="input-icon">个</span> -->
                            <el-radio-group v-model="ruleForm.two_tjsj_radio" class="form-one-radio">
                                <el-radio label="0">或</el-radio>
                                <el-radio label="1">与</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="团队订单累计" prop="two_team_order">
                            <el-input
                                v-model.trim="ruleForm.two_team_order"
                                oninput="value=value.replace(/[^\d]/g,'')"
                                clearable
                                placeholder="请输入团队订单累计数"
                            />
                            <!-- <span class="input-icon">笔</span> -->
                            <el-radio-group v-model="ruleForm.two_team_order_radio" class="form-one-radio">
                                <el-radio label="0">或</el-radio>
                                <el-radio label="1">与</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="三级代理佣金">
                    <div class="form-one">
                        <el-form-item label="代理商名称" prop="three_name">
                            <el-input v-model.trim="ruleForm.three_name" clearable placeholder="请输入代理商名称" />
                        </el-form-item>
                        <el-form-item label="返佣比例" prop="three_dls_reward">
                            <el-input
                                v-model.trim="ruleForm.three_dls_reward"
                                oninput="value=value.replace(/[^\d.]/g,'')"
                                clearable
                                placeholder="请输入整数或小数(保留两位小数)"
                            />
                            <span class="input-icon">%</span>
                        </el-form-item>
                    </div>
                    <div class="form-one">
                        <p>升级条件</p>
                        <el-form-item label="直属推荐会员" prop="three_zshy">
                            <el-input
                                v-model.trim="ruleForm.three_zshy"
                                oninput="value=value.replace(/[^\d]/g,'')"
                                clearable
                                placeholder="请输入所需直属推荐会员数"
                            />
                            <!-- <span class="input-icon">个</span> -->
                            <el-radio-group v-model="ruleForm.three_zshy_radio" class="form-one-radio">
                                <el-radio label="0">或</el-radio>
                                <el-radio label="1">与</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="推荐多少个会员" prop="three_tjhy">
                            <el-input
                                v-model.trim="ruleForm.two_tjhy"
                                oninput="value=value.replace(/[^\d]/g,'')"
                                clearable
                                placeholder="请输入推荐会员数量"
                            />
                            <!-- <span class="input-icon">个</span> -->
                            <el-radio-group v-model="ruleForm.three_tjhy_radio" class="form-one-radio">
                                <el-radio label="0">或</el-radio>
                                <el-radio label="1">与</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="团队订单累计" prop="three_team_order">
                            <el-input
                                v-model.trim="ruleForm.three_team_order"
                                oninput="value=value.replace(/[^\d]/g,'')"
                                clearable
                                placeholder="请输入团队订单累计数"
                            />
                            <!-- <span class="input-icon">笔</span> -->
                            <el-radio-group v-model="ruleForm.three_team_order" class="form-one-radio">
                                <el-radio label="0">或</el-radio>
                                <el-radio label="1">与</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-form>

        <!-- 固定底部按钮 -->
        <div class="foot-btn flexs-center" style="margin-top: 30px">
            <el-button type="primary" :loading="form_loading" @click="submitForm(ruleRef)">确认保存</el-button>
            <el-button @click="resetForm(ruleRef)">重置</el-button>
        </div>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, reactive } from "vue"
import GoBack from "@components/GoBack.vue"
import TitleMore from "@components/title-more.vue"
import CellTip from "@components/cell-tip.vue"
import PubPanel from "@components/PubPanel.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getInfo()
})

// 获取提示文本和已设置的比例
const tipArrs = ["返佣比例不可以超过订单金额的50%。"]
function getInfo() {
    proxy.$axios
        .get("agent/agentAward")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                // 区域代理设置
                ruleForm.one_reward = result.province_award || 0
                ruleForm.two_reward = result.city_award || 0
                ruleForm.three_reward = result.district_award || 0
                ruleForm.switch = Number(result.agent_upgrade)

                // 一级代理商设置
                ruleForm.one_name = result.one_name // 一级代理名称
                ruleForm.one_dls_reward = result.one_award || 0 // 一级代理返佣比例
                ruleForm.one_zshy = result.one_upgrade.invite_direct_num // 直推会员数
                ruleForm.one_zshy_radio = result.one_upgrade.invite_direct_condition ? String(result.one_upgrade.invite_direct_condition) : '0' // 直推会员数条件[0:或,1:与]
                ruleForm.one_tjhy = result.one_upgrade.invite_num // 推荐会员数
                ruleForm.one_tjhy_radio = result.one_upgrade.invite_num_condition ? String(result.one_upgrade.invite_num_condition) : '0'
                ruleForm.one_tjej = result.one_upgrade.invite_two // 直推二级代理商
                ruleForm.one_tjej_radio = result.one_upgrade.invite_two_condition ? String(result.one_upgrade.invite_two_condition) : '0'
                ruleForm.one_tjsj = result.one_upgrade.invite_three // 直推三级代理商
                ruleForm.one_tjsj_radio = result.one_upgrade.invite_three_condition ? String(result.one_upgrade.invite_three_condition) : '0'
                ruleForm.one_team_order = result.one_upgrade.total_amount // 团队订单累计金额
                ruleForm.one_team_order_radio = result.one_upgrade.total_amount_condition ? String(result.one_upgrade.total_amount_condition) : '0'

                // 二级代理
                ruleForm.two_name = result.two_name
                ruleForm.two_dls_reward = result.two_award || 0
                ruleForm.two_zshy = result.two_upgrade.invite_direct_num // 直推会员数
                ruleForm.two_zshy_radio = result.two_upgrade.invite_direct_condition ? String(result.two_upgrade.invite_direct_condition) : '0' // 直推会员数条件[0:或,1:与]
                ruleForm.two_tjhy = result.two_upgrade.invite_num // 推荐会员数
                ruleForm.two_tjhy_radio = result.two_upgrade.invite_num_condition ? String(result.two_upgrade.invite_num_condition) : '0'
                ruleForm.two_tjsj = result.two_upgrade.invite_three // 直推三级代理商
                ruleForm.two_tjsj_radio = result.two_upgrade.invite_three_condition ? String(result.two_upgrade.invite_three_condition) : '0'
                ruleForm.two_team_order = result.two_upgrade.total_amount // 团队订单累计金额
                ruleForm.two_team_order_radio = result.two_upgrade.total_amount_condition ? String(result.two_upgrade.total_amount_condition) : '0'

                // 三级代理
                ruleForm.three_name = result.three_name
                ruleForm.three_dls_reward = result.three_award || 0
                ruleForm.three_zshy = result.three_upgrade.invite_direct_num // 直推会员数
                ruleForm.three_zshy_radio = result.three_upgrade.invite_direct_condition ? String(result.three_upgrade.invite_direct_condition) : '0' // 直推会员数条件[0:或,1:与]
                ruleForm.three_tjhy = result.three_upgrade.invite_num // 推荐会员数
                ruleForm.three_tjhy_radio = result.three_upgrade.invite_num_condition ? String(result.three_upgrade.invite_num_condition) : '0'
                ruleForm.three_team_order = result.three_upgrade.total_amount // 团队订单累计金额
                ruleForm.three_team_order_radio = result.three_upgrade.total_amount_condition ? String(result.three_upgrade.total_amount_condition) : '0'
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

/**
 * 添加销售奖
 * @param {Array} ruleRef 表单规则
 * @param {Object} ruleForm  表单字段
 * @param {Object} ruleCheck  表单提示
 */
const form_loading = ref(false)
const ruleRef = ref(null)
const ruleForm = reactive({
    one_reward: "0",
    two_reward: "0",
    three_reward: "0",
    switch: 1,
    // 一级代理商设置
    one_name: "一级代理商",
    one_dls_reward: "0",
    one_zshy: "",
    one_tjhy: "",
    one_tjej: "",
    one_tjsj: "",
    one_team_order: "",
    one_zshy_radio: "0",
    one_tjhy_radio: "0",
    one_tjej_radio: "0",
    one_tjsj_radio: "0",
    one_team_order_radio: "0",
    // 二级代理商设置
    two_name: "二级代理商",
    two_dls_reward: "0",
    two_zshy: "",
    two_tjhy: "",
    two_tjsj: "",
    two_team_order: "",
    two_zshy_radio: "0",
    two_tjhy_radio: "0",
    two_tjsj_radio: "0",
    two_team_order_radio: "0",
    // 三级代理商设置
    three_name: "三级代理商",
    three_dls_reward: "0",
    three_zshy: "",
    three_tjhy: "",
    three_team_order: "",
    three_zshy_radio: "0",
    three_tjhy_radio: "0",
    three_team_order_radio: "0",
})
const ruleCheck = reactive({
    one_reward: [{ required: true, validator: proxy.$util.validNumOrPoint, trigger: "blur" }],
    two_reward: [{ required: true, validator: proxy.$util.validNumOrPoint, trigger: "blur" }],
    three_reward: [{ required: true, validator: proxy.$util.validNumOrPoint, trigger: "blur" }],
})
const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true
            // 一级代理升级条件
            let one_upgrade = {
                invite_direct_num: ruleForm.one_zshy, // 直推会员数
                invite_direct_condition: ruleForm.one_zshy_radio,
                invite_num: ruleForm.one_zshy, // 推荐会员数
                invite_num_condition: ruleForm.one_zshy_radio,
                invite_two: ruleForm.one_tjej, // 直推二级代理商
                invite_two_condition: ruleForm.one_tjej_radio,
                invite_three: ruleForm.one_tjsj, // 直推三级代理
                invite_three_condition: ruleForm.one_tjsj_radio,
                total_amount: ruleForm.one_team_order, // 团队订单累计金额
                total_amount_condition: ruleForm.one_team_order_radio,
            }
            // 二级代理升级条件
            let two_upgrade = {
                invite_direct_num: ruleForm.two_zshy, // 直推会员数
                invite_direct_condition: ruleForm.two_zshy_radio,
                invite_num: ruleForm.two_tjhy, // 推荐会员数
                invite_num_condition: ruleForm.two_tjhy_radio,
                invite_three: ruleForm.two_tjsj, // 直推三级代理
                invite_three_condition: ruleForm.two_tjsj_radio,
                total_amount: ruleForm.two_team_order, // 团队订单累计金额
                total_amount_condition: ruleForm.two_team_order_radio,
            }
            // 三级代理升级条件
            let three_upgrade = {
                invite_direct_num: ruleForm.three_zshy, // 直推会员数
                invite_direct_condition: ruleForm.three_zshy_radio,
                invite_num: ruleForm.three_tjhy, // 推荐会员数
                invite_num_condition: ruleForm.three_tjhy_radio,
                total_amount: ruleForm.three_team_order, // 团队订单累计金额
                total_amount_condition: ruleForm.three_team_order_radio,
            }

            let data = {
                // 区域代理设置
                province_award: ruleForm.one_reward,
                city_award: ruleForm.two_reward,
                district_award: ruleForm.three_reward,
                agent_upgrade: ruleForm.switch, // 代理商自动升级
                one_name: ruleForm.one_name, // 一级代理名称
                one_award: ruleForm.one_dls_reward, // 一级代理返佣比例
                one_upgrade, // 一级代理升级条件
                two_name: ruleForm.two_name, // 二级代理名称
                two_award: ruleForm.two_dls_reward,
                two_upgrade,
                three_name: ruleForm.three_name, // 二级代理名称
                three_award: ruleForm.three_dls_reward,
                three_upgrade,
            }
            console.log('data',data);
            proxy.$axios
                .post("agent/agentAward", data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        proxy.$message({ message: "设置成功！", type: "success" })
                    } else {
                        proxy.$message({message:res.data.msg,type:"error"})
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<script>
export default {
    name: "AgentSetup",
}
</script>

<style lang="less" scoped>
.el-form {
    .form-one {
        padding: @padding-mdl;
        margin: 0 0px @margin-md;
        background-color: @gray-1;
        .form-one-radio {
            margin-left: 16px;
            :deep(.el-radio) {
                margin-right: 20px;
            }
        }
    }
}
.input-icon {
    margin-left: @margin-sm;
    color: @gray-7;
}
:deep(.el-tabs) {
    .el-tabs__header {
        box-sizing: content-box;
    }
    .el-tabs__item {
        background: #f7f8fa;
        border-bottom: 1px solid #e4e7ed;
        &.is-active {
            color: #303133;
            background: #fff;
        }
    }
}
</style>
